import './CourseItem.scss';
import { useNavigate } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
import { setUserStatus } from '@/store/modules/user';

function CourseItem({info,randbgk}){
    const navigate = useNavigate();
    const dispatch = useDispatch();
    const { user_status } = useSelector(state => state.user);
    const backgroundStyle = {
        backgroundImage:`linear-gradient(to bottom right,${randbgk.dark}, ${randbgk.light})`,
    }

    function intoCourse(){
        dispatch(setUserStatus({
            ...user_status,
            class_id:info.class_id,
            class_name:info.class_name,
            teacher_name:info.teacher_name,
            menu_content:'课程视频'
        }));

        

        navigate('/studentcourse');
    }

    return (
        <div 
            className='course-item' 
            style={backgroundStyle} 
            onClick={intoCourse}
        >
            <h2 className='course-item-name'>{info.class_name}</h2>
            <ul>
                <li className='course-item-teacher'>{info.teacher_name}</li>
                <li className='course-item-school'>{info.teacher_school}</li>
            </ul>
        </div>
    )
}

export default CourseItem;